<template>

    <el-container>
        <el-header>
            <div class="header-content">
                <el-image src="https://th.bing.com/th/id/OIP.NmWGloRrdypWqYeb57UZWgHaC5?w=318&h=137&c=7&r=0&o=5&dpr=1.5&pid=1.7" @click="goHome" class="logo"/>
<!--                <img src="https://th.bing.com/th/id/OIP.NmWGloRrdypWqYeb57UZWgHaC5?w=318&h=137&c=7&r=0&o=5&dpr=1.5&pid=1.7"-->
<!--                     alt="Logo" class="logo">-->

                <div class="header-right">
                    <el-dropdown>
        <span class="el-dropdown-link">
            <img src="path/to/avatar" class="avatar"><span>{{ username }}</span>
        </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item @click.native="logout">Logout</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
            </div>
        </el-header>
        <el-container>
            <el-aside width="200px">
                <el-menu default-active="1" class="el-menu-vertical-demo">
                    <el-menu-item index="1">
                        <router-link tag="span" to="/Order">酒店订单</router-link>
                    </el-menu-item>
                    <el-menu-item index="2">
                        <router-link tag="span" to="/Order/FlightOrder">飞机票订单</router-link>
                    </el-menu-item>
                    <el-menu-item index="3">
                        <router-link tag="span" to="/Order/TrainOrder">火车票订单</router-link>
                    </el-menu-item>
                    <el-menu-item index="4">
                        <router-link tag="span" to="/Order/RentCarOrder">租车订单</router-link>
                    </el-menu-item>
                </el-menu>
            </el-aside>
            <el-main>
                <router-view></router-view>
            </el-main>
        </el-container>
    </el-container>
</template>


<script>

import Cookies from 'js-cookie'

export default {
    name: "OrderPage",
    data() {
        return {
            showText: true, // Initial state
            loggedIn: false, // Change this based on your actual login status
            username: 'User', // Change this based on your actual user data
        };
    },
    methods: {
        goHome() {
            // 点击logo，返回首页
            this.$router.push('/')
        },
        // handleSelect(key, keyPath) {
        //     // 点击侧边栏的订单选项，跳转到相应的订单页面
        //     this.$router.push('/order/' + key)
        // },
        logout() {
            // 退出登录的操作
            // 您需要在这里添加您的退出登录的逻辑
            // 删除 token
            localStorage.removeItem('token');
            Cookies.remove('token');
            // 移除 axios 的默认请求头
            // delete axios.defaults.headers.common['Authorization'];
            // 跳转到首页
            this.$router.push('/');
        },
        isLogin(){
            // 判断是否登录
            if (localStorage.getItem('token') === null) {
                this.$router.push('/');
            }
        }
    }
    ,
    created() {
        this.isLogin();
    },

    computed: {},

}
</script>

<style scoped>

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.el-menu-item {
    text-decoration: none !important;
}

.el-menu {
    overflow-y: hidden !important;
}

.el-aside {
    height: 100%;
    overflow: auto; /* Hide the scrollbar when it's not needed */
}

.el-header {
    position: sticky;
    top: 0;
    z-index: 1;
    border-bottom: 1px solid #ccc;
}

.logo {
    width: 100px;
    height: auto;
    /* Add some margin to the logo for spacing */
    margin: 0 20px;
}

.avatar {
    width: 30px;
    height: 30px;
    /* Add some margin to the avatar for spacing */
}

.header-right {
    display: flex;
    align-items: center;
    margin-right: 20px; /* 调整间距大小，根据需要进行更改 */
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}
</style>